<!DOCTYPE html>
<!-- saved from url=(0061)http://47.106.66.89:8080/teach/vue/Vue%E7%BB%83%E4%B9%A0.html -->
<html lang="en" style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Vue练习</title>
    <script src="./Vue练习_files/vue.min.js.下载"></script>
    <style data-id="immersive-translate-input-injected-css">.immersive-translate-input {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 2147483647;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .immersive-translate-input-loading {
        --loading-color: #f78fb6;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: block;
        margin: 12px auto;
        position: relative;
        color: white;
        left: -100px;
        box-sizing: border-box;
        animation: immersiveTranslateShadowRolling 1.5s linear infinite;
    }

    @keyframes immersiveTranslateShadowRolling {
        0% {
            box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
        }

        12% {
            box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
        }

        25% {
            box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
        }

        36% {
            box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color), 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
        }

        50% {
            box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color), 110px 0 var(--loading-color), 100px 0 var(--loading-color);
        }

        62% {
            box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color), 120px 0 var(--loading-color), 110px 0 var(--loading-color);
        }

        75% {
            box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color), 120px 0 var(--loading-color);
        }

        87% {
            box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
        }

        100% {
            box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
        }
    }


    .immersive-translate-search-recomend {
        border: 1px solid #dadce0;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        position: relative;
        font-size: 16px;
    }

    .immersive-translate-search-enhancement-en-title {
        color: #4d5156;
    }

    /* dark */
    @media (prefers-color-scheme: dark) {
        .immersive-translate-search-recomend {
            border: 1px solid #3c4043;
        }

        .immersive-translate-close-action svg {
            fill: #bdc1c6;
        }

        .immersive-translate-search-enhancement-en-title {
            color: #bdc1c6;
        }
    }


    .immersive-translate-search-settings {
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;
    }

    .immersive-translate-search-recomend::before {
        /* content: " "; */
        /* width: 20px; */
        /* height: 20px; */
        /* top: 16px; */
        /* position: absolute; */
        /* background: center / contain url(''); */
    }

    .immersive-translate-search-title {
    }

    .immersive-translate-search-title-wrapper {
    }

    .immersive-translate-search-time {
        font-size: 12px;
        margin: 4px 0 24px;
        color: #70757a;
    }

    .immersive-translate-expand-items {
        display: none;
    }

    .immersive-translate-search-more {
        margin-top: 16px;
        font-size: 14px;
    }

    .immersive-translate-modal {
        display: none;
        position: fixed;
        z-index: 1000000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

    .immersive-translate-modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        border-radius: 10px;
        width: 80%;
        max-width: 500px;
        font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
        "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    }

    .immersive-translate-modal-title {
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 20px;
        color: hsl(205, 20%, 32%);
    }

    .immersive-translate-modal-body {
        color: hsl(205, 20%, 32%)
    }

    .immersive-translate-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .immersive-translate-close:hover,
    .immersive-translate-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .immersive-translate-modal-footer {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .immersive-translate-btn {
        color: #fff;
        background-color: #ea4c89;
        border: none;
        font-size: 14px;
        margin: 5px;
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 5px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .immersive-translate-cancel-btn {
        /* gray color */
        background-color: rgb(89, 107, 120);
    }

    .immersive-translate-btn:hover {
        background-color: #f082ac;
    }

    .immersive-translate-cancel-btn:hover {
        background-color: hsl(205, 20%, 32%);
    }


    .immersive-translate-btn svg {
        margin-right: 5px;
    }

    .immersive-translate-link {
        cursor: pointer;
        user-select: none;
        -webkit-user-drag: none;
        text-decoration: none;
        color: #007bff;
        -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
    }

    .immersive-translate-modal input[type="radio"] {
        margin: 0 6px 16px;
        cursor: pointer;
    }

    .immersive-translate-modal label {
        cursor: pointer;
    }

    .immersive-translate-close-action {
        position: absolute;
        top: 2px;
        right: 0px;
        cursor: pointer;
    }
    </style>
</head>
<body oncontextmenu="return false;" style="margin: 0px;min-height: 100%">
<div id="app" style="margin-inline: 10%;">
    <fieldset id="f1">
        <legend>练习题1</legend>
        <div style="display: grid; grid-template-columns: 46% 46% auto; gap: 10px;">
            <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);"><img
                    src="./Vue练习_files/u=3036008366,3187194146&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG"
                    width="50%">
                <div style="display: inline-block; vertical-align: top; line-height: 2em;"><label>姓名: </label><span>扈三娘</span><br>
                    <label>性别: </label><span>女</span><br>
                    <label>绰号: </label><span>一丈青</span><br>
                    <label>年龄: </label><span>22</span><br></div>
            </div>
            <pre contenteditable="true"
                 style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">{
    name: "武松",
    gender: "男",
    alias: "行者",
    age: 28,
    head: 'https://img1.baidu.com/it/u=137100414,3803336036&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=707'
}
            </pre>
            <div style="line-height: 2em; text-align: center;">
                <button>复制</button>
            </div>
        </div>
    </fieldset>

    <script>
        setTimeout(() => {
            var f1 = new Vue({
                el: "#f1",
                data: {
                    name: "武松",
                    gender: "男",
                    alias: "行者",
                    age: 28,
                    head: 'https://img1.baidu.com/it/u=137100414,3803336036&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=707',
                    intro: `<h3>生平介绍</h3>`
                }
            })
        }, 5000)
    </script>
    <fieldset>
        <legend>练习题2</legend>
        <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
            <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
                <div style="margin: 5px; text-align: center;">平均年龄: 22, 平均武力: 88, 总武力: 264</div>
                <div style="border: 1px solid blueviolet; padding: 5px; margin: 5px;"><img
                        src="./Vue练习_files/u=3036008366,3187194146&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG"
                        height="130px">
                    <div style="display: inline-block; vertical-align: top; line-height: 1.3em;">
                        <label>姓名: </label><span>扈三娘</span><br> <label>性别: </label><span>女</span><br>
                        <label>绰号: </label><span>一丈青</span><br> <label>年龄: </label><span>22</span><br>
                        <label>武力: </label><span>88</span><br></div>
                </div>
                <div style="border: 1px solid blueviolet; padding: 5px; margin: 5px;"><img
                        src="./Vue练习_files/u=3036008366,3187194146&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG"
                        height="130px">
                    <div style="display: inline-block; vertical-align: top; line-height: 1.3em;">
                        <label>姓名: </label><span>扈三娘</span><br> <label>性别: </label><span>女</span><br>
                        <label>绰号: </label><span>一丈青</span><br> <label>年龄: </label><span>22</span><br>
                        <label>武力: </label><span>88</span><br></div>
                </div>
                <div style="border: 1px solid blueviolet; padding: 5px; margin: 5px;"><img
                        src="./Vue练习_files/u=3036008366,3187194146&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG"
                        height="130px">
                    <div style="display: inline-block; vertical-align: top; line-height: 1.3em;">
                        <label>姓名: </label><span>扈三娘</span><br> <label>性别: </label><span>女</span><br>
                        <label>绰号: </label><span>一丈青</span><br> <label>年龄: </label><span>22</span><br>
                        <label>武力: </label><span>88</span><br></div>
                </div>
            </div>
            <pre contenteditable="true"
                 style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">[{
    name: "武松",
    gender: "男",
    alias: "行者",
    age: 28,
    武力: 90,
    head: 'https://img1.baidu.com/it/u=137100414,3803336036&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=707'
},
{
    name: "林冲",
    gender: "男",
    alias: "豹子头",
    age: 95,
    head: 'https://img2.baidu.com/it/u=1956721953,4058938663&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=800&amp;h=994'
},
{
    name: "扈三娘",
    gender: "女",
    alias: "一丈青",
    age: 88,
    head: 'https://img0.baidu.com/it/u=3036008366,3187194146&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=667'
}]
            </pre>
            <div style="line-height: 2em; text-align: center;">
                <button>复制</button>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>练习题3</legend>
        <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
            <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
                <div><img width="50%"
                          src="./Vue练习_files/u=1790110791,1533166735&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG"><br>
                    <span>刘唐</span></div>
            </div>
            <pre contenteditable="true"
                 style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">{
    name: "林冲",
    head: "https://img0.baidu.com/it/u=4053272622,2573201558&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=584",
    imgStyle:{
                width: "200px",
                height: "200px",
                objectFit: "cover",
                borderRadius: "50%";
                overflow: "hidden"
              },
    spanStyle:{
                display: "inline-block",
                border: "1px blue solid",
                width: "100%",
                padding: "5px 10px",
                boxSizing: "border-box",
              }
}

            </pre>
            <div style="line-height: 2em; text-align: center;">
                <button>复制</button>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>练习题4</legend>
        <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
            <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
                <div id="div1"><img width="100px"
                                    src="./Vue练习_files/u=3297127229,1378963575&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG">
                    <br> 关注样式
                </div>
                <div id="div2"><img width="100px"
                                    src="./Vue练习_files/u=3297127229,1378963575&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG">
                    <br> 关注样式
                </div>
                <div id="div3"><img width="100px"
                                    src="./Vue练习_files/u=3297127229,1378963575&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG">
                    <br> 关注样式
                </div>
            </div>
            <pre contenteditable="true"
                 style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">.border {
    border: 2px solid blue;
}

.text {
    color: red;
    text-align: center;
}

.size {
    width: 150px;
    height: 150px; padding : 5px;
    display: inline-block;
    margin: 5px;
    padding: 5px;
}
            </pre>
            <div style="line-height: 2em; text-align: center;">
                <button>复制</button>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>练习题4</legend>
        <div style="display: grid; grid-template-columns: 93% auto; column-gap: 10px;">
            <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);"><h3>阻止事件冒泡</h3>
                <div id="div4" style="width: 200px; height: 200px; background: red;">
                    <div id="div5" style="width: 150px; height: 150px; background: green;">
                        <div id="div6" style="width: 100px; height: 100px; background: blue;"></div>
                    </div>
                </div>
                <h3>阻止默认行为</h3>
                <form action="https://baidu.com/" target="_blank">
                    <button>百度</button>
                </form>
                <a href="https://taobao.com/" target="_blank">淘宝</a></div>
            <div style="line-height: 2em; text-align: center;">
                <button>复制</button>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>练习题5</legend>
        <div style="display: grid; grid-template-columns: 93% auto; gap: 10px;">
            <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
                <table border="1" style="width: 100%; text-align: center;">
                    <tbody>
                    <tr>
                        <th>排名</th>
                        <th>姓名</th>
                        <th>绰号</th>
                        <th>力量</th>
                        <th>智力</th>
                        <th>敏捷</th>
                        <th>综合战斗力</th>
                    </tr>
                    <tr>
                        <td>第1名</td>
                        <td>秦明</td>
                        <td>霹雳火</td>
                        <td>
                            <button>-</button>
                            100
                            <button>+</button>
                        </td>
                        <td>
                            <button>-</button>
                            100
                            <button>+</button>
                        </td>
                        <td>
                            <button>-</button>
                            100
                            <button>+</button>
                        </td>
                        <td>300</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div style="line-height: 2em; text-align: center;">
                <button>复制</button>
                <small>排序</small> <select>
                <option>力量</option>
                <option>智力</option>
                <option>敏捷</option>
                <option>综合</option>
            </select></div>
            <pre contenteditable="true"
                 style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">/**
1. 将水浒英雄显示到表格中
2. 实现属性值的加减
3. 统计出每个影响的综合战斗力: 力量+智力+敏捷
4. 根据实时计算结果, 实现排序
*/
var Hero = function(name,alias,p,i,a){
    this.name = name;
    this.alias = alias;
    this.p = p;
    this.i = i;
    this.a = a;
}
var heroes = [
    new Hero("林冲","豹子头",99,85,90),
    new Hero("武松","行者",98,80,88),
    new Hero("秦明","霹雳火",95,82,85),
    new Hero("白胜","白日鼠",75,80,85),
    new Hero("石秀","拼命三郎",97,82,83),
];
            </pre>
        </div>
    </fieldset>
    <fieldset>
        <legend>练习题6</legend>
        <div style="display: grid; grid-template-columns: 46% 46% auto; gap: 10px;">
            <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
                <form action="http://47.106.66.89:8080/teach/vue/Vue%E7%BB%83%E4%B9%A0.html" style="line-height: 2em;">
                    姓名: <input name="name"><br>
                    绰号: <input name="alias"><br>
                    学历: <select name="edu">
                    <option>xxxxxx</option>
                </select><br>
                    职位: <span><input name="job" type="radio"></span><br>
                    爱好: <span><input name="like" type="checkbox"></span><br>
                    介绍: <textarea name="desc"></textarea><br>
                    <button style="margin-left: 166px;">提交</button>
                </form>
            </div>
            <pre contenteditable="true"
                 style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">/**
1. 学历, 职位, 爱好的选项添加到对应的控件中
2. 将宋江的个人信息绑定到表单的对应元素中
*/
var sj = {
    name : "宋江",
    alias : "及时雨",
    edu : "秀才",
    job : "老大",
    like : ["读书","下棋","喝酒"],
    desc : "宋江（1073年—1124年），字公明，绰号呼保义、及时雨、孝义黑三郎，施耐庵所作古典名著《水浒传》中的主人公。原为山东省郓城县押司，身材矮小，面目黝黑，为梁山起义军领袖"
};
var eduItems = ["进士","贡士","举人","秀才"];
var jobItems = ["老大","军师","武将","工匠"];
var likeItems = ["使枪","弄棒","喝酒","绣花","读书","蹴鞠","书法","绘画","下棋"];
            </pre>
            <div style="line-height: 2em; text-align: center;">
                <button>复制</button>
            </div>
        </div>
    </fieldset>
</div>
<script>
    var v = new Vue({
        el: "#app",
        mounted() {
            var btns = this.$el.querySelectorAll("fieldset>div>div>button:nth-child(1)");
            btns.forEach(b => {
                b.onclick = () => {
                    let p = b;
                    do {
                        p = p.parentElement;
                    } while (p.tagName != 'FIELDSET');
                    copy(p.outerHTML);
                };
            })
        }
    })

    function copy(content) {
        if (!content) return;
        var aux = document.getElementById("$aux$");
        var pux = document.getElementById("$pux$");
        if (!aux) {
            aux = document.createElement("textarea");
            aux.setAttribute("id", "$aux$");
            aux.style.position = 'fixed';
            aux.style.left = '-1000px'
            document.body.appendChild(aux);
            pux = document.createElement("pre");
            pux.setAttribute("id", "$pux$");
            pux.style.display = 'none';
            document.body.appendChild(pux);
        }
        if (content.substring(0, 1) == '#') {
            content = content.substring(1);
            content = document.getElementById(content);
            content = content ? content.innerText : "";
            console.info(content)
        }
        // 为了保留换行, 引入了 pux
        pux.innerHTML = content;
        aux.innerHTML = pux.innerHTML;
        aux.select();
        document.execCommand("copy");
    }
</script>



</body>
</html>